<script setup>
import { defineProps, computed } from "vue";

const props = defineProps({
  percent: {
    type: Number,
    required: true,
  },
  strokeColor: {
    type: String,
    default: "#3FAA90",
  },
  trailColor: {
    type: String,
    default: "#eaeaea",
  },
  showInfo: {
    type: Boolean,
    default: true,
  },
  strokeWidth: {
    type: Number,
    default: 8,
  },
});

const progressStyle = computed(() => ({
  width: `${props.percent}%`,
  height: `${props.strokeWidth}px`,
  backgroundImage: `linear-gradient(to right, ${props.strokeColor}, #ffffff30)`,
}));

const trailStyle = computed(() => ({
  height: `${props.strokeWidth}px`,
  backgroundColor: props.trailColor,
}));
</script>

<template>
  <div class="progress-trail" :style="trailStyle">
    <div class="progress-stroke" :style="progressStyle"></div>
  </div>
</template>

<style scoped lang="less">
.progress-trail {
  width: 100%;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.progress-stroke {
  border-radius: 4px;
  transition: width 0.3s ease;
}
</style>
